<template>
  <DefaultLayout>
    <n-flex class="w-100% m-auto" justify="center">
      <!-- 头部标题 -->
      <n-flex class="w-100%" justify="center" style="background-color: #fff">
        <n-flex class="mt-20 w-50% h-120 min-w-500" justify="space-between">
          <n-flex vertical>
            <n-flex class="font-600 text-28">
              <n-ellipsis class="mr-40">{{ job.title }}</n-ellipsis>
              <n-text class="color-#ff6400">{{ job.salary_min }}-{{ job.salary_max }}k</n-text>
              <n-button text @click="handleCollectJob" class="ml-15">
                <i class="i-fe:star text-24" :color="hasCollected ? 'primary' : 'default'"></i>
              </n-button>
            </n-flex>
            <n-flex :size="20">
              <span>{{ getCity(job.address_code) }}</span>
              |
              <span>{{ getJobType(job.type) }}</span>
              |
              <span>{{ getEducationDegree(job.education_requirement) }}</span>
            </n-flex>
          </n-flex>
          <n-flex vertical>
            <n-button round type="primary" class="mt-5" size="large" @click="handleSubmit">投递简历</n-button>
          </n-flex>
        </n-flex>
      </n-flex>
      <!-- 主体部分 -->
      <n-flex class="w-1015">
        <n-flex class="mt-12" justify="space-between">
          <div class="w-650">
            <n-card style="border-radius: 10px" :bordered="false">
              <n-flex>
                <n-avatar lazy :src="company.company_icon" :size="80" round />
                <n-flex vertical justify="center">
                  <n-flex class="text-16">
                    <n-text>{{ recruiter.name }}</n-text>
                    <n-text v-if="hasTitle">· {{ recruiter.title }}</n-text>
                  </n-flex>
                  <n-flex class="text-14 color-#666">
                    <a :href="'/company/' + company.company_id" target="_blank">
                      {{ company.company_name }}
                    </a>
                  </n-flex>
                </n-flex>
                <n-flex align="center" class="ml-auto">
                  <n-button round type="primary" size="large" @click="handleCheckCompany">
                    查看招聘企业
                  </n-button>
                </n-flex>
              </n-flex>
            </n-card>
            <n-card title="职位介绍" style="border-radius: 10px" :bordered="false" class="mt-12">
              <n-flex>
                <n-tag
                  v-for="item in job.job_tags"
                  :bordered="false"
                  :color="{ color: '#f8f8f8', textColor: '#8d92a1', borderColor: '#fff' }"
                >
                  {{ item }}
                </n-tag>
              </n-flex>
              <div class="mt-20">
                <p v-for="item in jobDescs">
                  {{ item }}
                </p>
              </div>
            </n-card>
            <n-card title="公司简介" style="border-radius: 10px" :bordered="false" class="mt-12">
              <div>
                <p v-for="item in companyDescs" class="mt-12">
                  {{ item }}
                </p>
              </div>
            </n-card>
          </div>
          <div class="w-350">
            <n-card title="公司信息" style="border-radius: 10px" :bordered="false">
              <n-flex align="center">
                <n-avatar :src="company.company_icon" :size="48" />
                <span>{{ company.company_name }}</span>
                <n-button
                  text
                  :type="hasFollowed ? 'default' : 'primary'"
                  class="ml-auto"
                  @click="handleFollowCompany"
                >
                  {{ hasFollowed ? '已关注' : '关注' }}
                </n-button>
              </n-flex>
              <n-flex vertical class="mt-20">
                <span>企业行业：{{ getIndustriesName(company.industry_code) }}</span>
                <span>人数规模：{{ getCompanySize(company.size) }}</span>
                <span>企业地址：{{ getCity(company.address_code) }}</span>
              </n-flex>
            </n-card>
            <n-card title="推荐企业" style="border-radius: 10px" :bordered="false" class="mt-12">
              <n-flex vertical :size="20">
                <a v-for="item in companies" :href="'/company/' + item.company_id" target="_blank">
                  <n-flex align="center">
                    <n-avatar :src="item.company_icon" :size="32"></n-avatar>
                    <n-text>{{ item.company_name }}</n-text>
                  </n-flex>
                </a>
              </n-flex>
            </n-card>
          </div>
        </n-flex>
      </n-flex>
    </n-flex>
  </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '@/layouts/default/index.vue'
import seekerApi from '@/api/seeker'
import { getCity, getJobType, getCompanySize, getEducationDegree, getIndustriesName } from '@/data'
import { useSeekerStore } from '@/store'
const router = useRouter()
const seekerStore = useSeekerStore()

const props = defineProps({
  job_id: undefined,
})

let jobDescs = computed(() => {
  return job.value.job_description?.split(/[\r\n]+/)
})

let companyDescs = computed(() => {
  return company.value.description?.split(/[\r\n]+/)
})

const job = ref({})
const company = ref({})
const recruiter = ref({})

//推荐企业
const companies = ref([])

const hasTitle = ref(false)

function handleCheckCompany() {
  router.push('/company/' + company.value.company_id)
}

const hasFollowed = ref(false)
const hasCollected = ref(false)

async function handleFollowCompany() {
  if (!hasFollowed.value) {
    const { data } = await seekerApi.followCompany(
      seekerStore.seeker.seeker_id,
      company.value.company_id
    )
    if (data) {
      $message.success('关注企业成功')
      hasFollowed.value = true
    }
  } else {
    const { data } = await seekerApi.cancelFollowing(
      seekerStore.seeker.seeker_id,
      company.value.company_id
    )
    if (data) {
      $message.success('取消关注企业成功')
      hasFollowed.value = false
    }
  }
}

async function handleCollectJob() {
  if (!hasCollected.value) {
    const { data } = await seekerApi.collectJob(seekerStore.seeker.seeker_id, job.value.job_id)
    if (data) {
      $message.success('收藏职位成功')
      hasCollected.value = true
    }
  } else {
    const { data } = await seekerApi.cancelCollection(
      seekerStore.seeker.seeker_id,
      job.value.job_id
    )
    if (data) {
      $message.success('取消收藏职位成功')
      hasCollected.value = false
    }
  }
}

function handleSubmit() {
  $dialog.create({
    title: '确定投递',
    content: '您将把个人简历投递至该职位招聘人员，是否确定？',
    positiveText: '确定',
    negativeText: '取消',
    async onPositiveClick() {
      await seekerApi.submitResume({
        seeker_id: seekerStore.seeker.seeker_id,
        recruiter_id: recruiter.value.recruiter_id,
        job_id: job.value.job_id,
      })
      $message.success('简历投递成功')
    },

  })
}

onMounted(async () => {
  const { data } = await seekerApi.getJobDetail(props.job_id)
  let value = data
  job.value = value.job
  company.value = value.company
  recruiter.value = value.recruiter
  //设置是否显示头衔
  hasTitle.value = recruiter.value.title !== null

  let res = await seekerApi.getRecommendCompanies(seekerStore.seeker.seeker_id,4)
  companies.value = res.data

  //是否了收藏职位
  res = await seekerApi.hasCollectedJob(seekerStore.seeker.seeker_id, job.value.job_id)
  hasCollected.value = res.data

  //是否了关注企业
  res = await seekerApi.hasFollowedCompany(seekerStore.seeker.seeker_id, company.value.company_id)
  hasFollowed.value = res.data
})
</script>
